import {defineAsyncComponent, h} from "vue";
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/bak',
      name: 'bak',
      component: () => import('../views/bak/BakView.vue'),
      children: [
        {
          path: 'smoothDnd01',
          name: 'smoothDnd01',
          component: () => import('../views/bak/SmoothDndDemo01.vue'),
        },
        {
          path: 'smoothDnd01a',
          name: 'smoothDnd01a',
          component: () => import('../views/bak/SmoothDndDemo01a.vue'),
        },
        {
          path: 'smoothDnd01b',
          name: 'smoothDnd01b',
          component: () => import('../views/bak/SmoothDndDemo01b.vue'),
        },
        {
          path: 'smoothDnd01c',
          name: 'smoothDnd01c',
          component: () => import('../views/bak/SmoothDndDemo01c.vue'),
        },
        {
          path: 'smoothDnd02',
          name: 'smoothDnd02',
          component: () => import('../views/bak/SmoothDndDemo02.vue'),
        },
        {
          path: 'smoothDnd02a',
          name: 'smoothDnd02a',
          component: () => import('../views/bak/SmoothDndDemo02a.vue'),
        },
        {
          path: 'smoothDnd02b',
          name: 'smoothDnd02b',
          component: () => import('../views/bak/SmoothDndDemo02b.vue'),
        },
        {
          path: 'smoothDnd02c',
          name: 'smoothDnd02c',
          component: () => import('../views/bak/SmoothDndDemo02c.vue'),
        },
        {
          path: 'smoothDnd03',
          name: 'smoothDnd03',
          component: () => import('../views/bak/SmoothDndDemo03.vue'),
        },
        {
          path: 'smoothDnd03a',
          name: 'smoothDnd03a',
          component: () => import('../views/bak/SmoothDndDemo03a.vue'),
        },
        {
          path: 'smoothDnd03b',
          name: 'smoothDnd03b',
          component: () => import('../views/bak/SmoothDndDemo03b.vue'),
        },
        {
          path: 'smoothDnd03c',
          name: 'smoothDnd03c',
          component: () => import('../views/bak/SmoothDndDemo03c.vue'),
        },
        {
          path: 'smoothDnd03d',
          name: 'smoothDnd03d',
          component: () => import('../views/bak/SmoothDndDemo03d.vue'),
        },
        {
          path: 'sd-demo01',
          name: 'sd-demo01',
          component: () => import('../views/bak/smooth-dnd-demo/sd-demo01.vue'),
        },
        {
          path: 'sd-demo02',
          name: 'sd-demo02',
          component: () => import('../views/bak/smooth-dnd-demo/sd-demo02.vue'),
        },
        {
          path: 'sd-demo03',
          name: 'sd-demo03',
          component: () => import('../views/bak/smooth-dnd-demo/sd-demo03.vue'),
        },
        {
          path: 'home',
          name: 'bakHomeDetail',
          component: () => import('../views/bak/HomeView.vue'),
        },
        {
          path: 'about',
          name: 'bakAbout',
          component: () => import('../views/bak/AboutView.vue'),
          children: [
            {
              path: ':id',
              name: 'bakAboutDetail',
              //component: () => h('div', ($route)=>`${$route.params.id}-->${Date.now().toLocaleString()}`),
              // component: () => h('div', 'dataSource'+(new Date()).toLocaleString())
              component: () => import('../views/bak/AboutDetailView.vue'),
            }
          ]
        },
        {
          path: 'dataSourceBak',
          name: 'bakDataSourceBak',
          component: () => h('div', 'dataSourceBak')
        },
        {
          path: 'actionsBak',
          name: 'bakActionsBak',
          component: () => h('div', 'actionsBak')
        },
        {
          path: 'layoutBak',
          name: 'bakLayoutBak',
          component: () => h('div', 'layoutBak')
        }
      ]
    },
    {
      path: '/dataSource',
      name: 'dataSource',
      component: () => defineAsyncComponent(()=>import('../views/DataSourceView.vue')),
    },
    {
      path: '/actions',
      name: 'actions',
      component: () => defineAsyncComponent(()=>import('../views/ActionsView.vue')),
    },
    {
      path: '/layout',
      name: 'layout',
      component: () => defineAsyncComponent(()=>import('../views/LayoutView.vue')),
    }
  ]
})

export default router
